<template>
    <div class="page" data-page="dutyRoster" style="z-index: 2;">
        <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left">
                    <a class="link back">
                        <i class="icon icon-back"></i>
                        <span class="ios-only">Back</span>
                    </a>
                </div>
                <div class="title" style="padding-right: 56px;margin: 0px auto;">值班表</div>
            </div>
        </div>

        <div class="page-content dutyRoster-page-content" >
            <div class="list accordion-list" style="margin: 0px 0px;">
                <ul>
                    <li class="accordion-item" id="closeaccirdion">
                        <a href="#" class="item-link" style="height: 50px;padding-left: 24px;">
                            <div class="item-inner" style="width: 100%;height: 40px">
                                <img src="{{$root.staticPath}}img/mine/dutyRoster_ca.png">
                                <input type="text" class="am_pm_top" id="data_value" style="font-size: 14px"></input>
                                <!--<p class="timeValue_top" id="week_day"></p>-->
                            </div>
                        </a>
                        <!--日历-->
                        <div class="block block-strong no-padding  accordion-item-content">
                            <div id="demo-calendar-inline-container"></div>
                        </div>
                    </li>
                </ul>
            </div>

            <!--值班表列表-->
            <div class="list simple-list line_clear" style="margin: 10px 0px;width: 100%">
                <ul>

                </ul>
            </div>
        </div>
    </div>
</template>
<style scoped>

    .tel {
        right: 24px;
        position: absolute;
        font-size: 14px;
        color: #1aa5fd;
        text-align: right
    }

    .popname {
        left: 56px;
        position: absolute;
        font-size: 14px;
    }

    .lot {
        height: 40px;
        width: 100%;
    }

    .custline {
        height: 1px;
        left: 15px;
        right: 12px;
        top: 49px;
        position: absolute;
    }

    .line_clear ul:before {
        height: 0px;
    }

    .line_clear ul:after {
        height: 0px;
    }

    .line_clear_top ul:before {
        height: 0px;
    }

    .line_clear_top ul:after {
        height: 0px;
    }

    .nr item-media:after {
        height: 1px;
        width: 100px;
        background: red;
    }

    .nr {
        width: 100%;
        height: 50px;
    }

    .fist_img {
        left: 20px;
        position: absolute;
    }

    .am_pm {
        font-size: 15px;
        position: absolute;
        left: 59px;
        margin: auto;
    }

    .timeValue {
        font-size: 15px;
        color: #666;
        position: absolute;
        left: 102px;
        margin: auto;
    }

    .am_pm_top {
        font-size: 14px;
        color: #333;
        position: absolute;
        left: 32px;
        margin: auto;
    }
</style>
<script>
    return {
        // Component Methods
        methods: {
            getdutyRoster: function () {
                var $ = this.$;
                let _time = $("#data_value").val().split(' ')[0];
                var dataDR = [];
                common.loading(1);
                $(".line_clear ul").empty();
                Dao.getWatchDetails({
                        organizationId: this.$route.params.organizationId,
                        userName: userInfor.accountName,
                        deviceId: appKeyObj.deviceId,
                        date: _time,
                    }, function (data) {
                        if(data && data.length>0){
                            dataDR = data;
                            common.loading(0);
                            for (var i = 0; i < dataDR.length; i++) {
                                var startTime = '';
                                var endTime = '';
                                var image_sun_mon = '';
                                var accountListdata = [];
                                accountListdata = dataDR[i].detailList;
                                if (accountListdata.length != 0) {
                                    startTime = accountListdata[0].watchStartTimeStr;
                                    endTime = accountListdata[0].watchEndTimeStr;
                                }
                                if (dataDR[i].orderName == "晚班") {
                                    image_sun_mon = staticPath + "img/mine/dutyRoster_mor.png";
                                } else {
                                    image_sun_mon = staticPath + "img/mine/dutyRoster_sun.png";
                                }

                                $(".line_clear ul").append(
                                    '<div class="item-link item-content" style="height: 50px;">'
                                    + '<div class="item-media nr">'
                                    + '<img class="fist_img" src=' + image_sun_mon + '>'
                                    + '<p class="am_pm">' + common.transNullundefined(dataDR[i].orderName) + '</p>'
                                    + '<p class="timeValue">' + startTime + '-' + endTime + '</p>'
                                    + '</div>'
                                    + '<ul class="custline"></ul>'
                                    + '</div>'
                                );

                                for (var j = 0; j < accountListdata.length; j++) {
                                    $(".line_clear ul").append(
                                        '<div class="item-link lot">'
                                        + '<div class="item-cell lot">'
                                        + '<div class="item-row lot">'
                                        + '<div class="item-cell popname">' + common.transNullundefined(accountListdata[j].watchAccountName) + '</div>'
                                        + '<a class="item-cell tel" href="tel:'+accountListdata[j].mobile+'" onclick="window.location=\'tel:'+accountListdata[j].mobile+'\'">' + common.transNullundefined(accountListdata[j].mobile) + '</a>'
                                        + '</div>'
                                        + '</div>'
                                        + '</div>'
                                    );
                                }
                            }
                        }else{
                            $(".line_clear ul").append(`<div class="no-data" style="margin: 10px 0;">暂无值班人员</div>`);
                        }
                        common.loading(0);
                    },function(e) {
                        common.loading(0);
                        app.methods.showToastBottom('获取数据失败');
                    });
            },
        },
        on: {

            pageInit: function (e, page) {
                var self = this;
                var app = self.$app;
                var $ = self.$;
                var monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
                self.calendarInline = app.calendar.create({
                    containerEl: '#demo-calendar-inline-container',
                    value: [new Date()],
                    inputEl: '#data_value',
                    dateFormat: 'yyyy-mm-dd DD',
                    firstDay: 0,
                    dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],
                    dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                    renderToolbar: function () {
                        return '<div class="toolbar calendar-custom-toolbar no-shadow">' +
                            '<div class="toolbar-inner">' +
                            '<div class="left">' +
                            '<a href="#" class="link icon-only"><i class="icon icon-back iconfont icon-fanhui' + (self.$theme.md ? 'color-black' : '') + '"></i></a>' +
                            '</div>' +
                            '<div class="center"></div>' +
                            '<div class="right">' +
                            '<a href="#" class="link icon-only"><i class="icon icon-forward iconfont icon-fanhui ' + (self.$theme.md ? 'color-black' : '') + '"></i></a>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                    },
                    on: {

                        init: function (c) {
                            $('.calendar-custom-toolbar .center').text(c.currentYear + ' - ' + monthNames[c.currentMonth]);
                            $('.calendar-custom-toolbar .left .link').on('click', function () {
                                self.calendarInline.prevMonth();
                            });
                            $('.calendar-custom-toolbar .right .link').on('click', function () {
                                self.calendarInline.nextMonth();
                            });
                        },
                        monthYearChangeStart: function (c) {
                            $('.calendar-custom-toolbar .center').text(c.currentYear + ' - ' + monthNames[c.currentMonth]);
                        },
                        calendarDayClick:function () {
                            setTimeout(function () {
                                self.getdutyRoster();
                                app.accordion.close("#closeaccirdion");
                            }, 500);
                        }
                    }
                });
                self.getdutyRoster();
            }
        },
        pageBeforeRemove() {
            var self = this;
            self.calendarInline.destroy();
        },
    }
</script>

